var table = layui.table; // 获取table实例

// 第一个实例
var tableIns = table.render({
    elem: '#customerList',
    url: '/customer/list', // 数据接口地址
    page: true, // 开启分页，默认每页10条数据
    parseData: function (res) {  // res 即为原始返回的数据
        console.log("哈哈哈哈");
        console.log(res);
        return {
            "code": res.code, // 解析接口状态
            "msg": res.msg,  // 解析提示文本
            "count": res.data.count, // 解析数据长度
            "data": res.data.records // 解析数据列表
        };
    },
    cols: [[  // 表头，其中 field 对应的是数据返回实体类的名字
        {field: 'realName', title: '真实姓名'},
        {field: 'sex', title: '性别'},
        {field: 'age', title: '年龄'},
        {field: 'phone', title: '手机号码'},
        {field: 'createTime', title: '创建时间'},
        {title: '操作', toolbar: '#barDemo'},
    ]]
});

/**
 * 按条件查询
 */
function query() {
    tableIns.reload({
        where: {
            realName: $("#realName").val(),  // 通过 JQuery 获取到查询条件的值
            phone: $("#phone").val()
        },
        page: {
            curr: 1  // 重新从第 1 页开始
        }
    });
}

/**
 * 增加按钮响应，弹出一个页面层
 */
function toAdd() {

    // 利用封装的方法打开弹出层
    openLayer('/customer/toAdd', '新增客户');

    /// Ajax 请求后台获取数据，并把请求回来的数据，设置到弹出层中（这里其实返回的是页面）
    // $.get('/customer/toAdd', function (res) {
    //     layer.open({
    //         type: 1,  /// 类型 1，代表它是页面层
    //         title: '新增客户', /// 弹出层左上角显示的名称
    //         area: ['800px', '450px'], /// 弹出层的宽高
    //         content: res // 弹出层的内容
    //     });
    // });

    layui.form.render();  /// 重新渲染

    // 利用封装的方法 监听提交事件
    mySubmit('addSubmit', 'post');

    // layui.form.on('submit(addSubmit)', function (data) {
    //     // console.log(data.elem);  /// 被执行事件的元素 DOM 对象，一般为 button 对象
    //     // console.log(data.form);  /// 被执行提交的 form 对象，一般存在 form 标签时才会返回
    //     // console.log(data.field); /// 当前容器的全部表单字段，名值对形式：{name : value}
    //
    //     // 使用 Ajax 请求提交表单
    //     $.ajax({
    //         url: data.form.action,  // 获取提交的路径
    //         async: false,
    //         type: 'post',
    //         contentType: 'application/json;charset=utf-8',   /// 文本类型
    //         data: JSON.stringify(data.field),
    //         success: function (res) {
    //             if (res.code == 0) {
    //                 layer.closeAll();  /// 关闭弹出层
    //                 query(); /// 查询
    //             } else {
    //                 layer.alert(res.msg);  /// 打印提示信息
    //             }
    //         }
    //     });
    //     return false;  /// 阻止表单跳转，如果需要表单跳转，去掉这段即可。
    // });
}

/**
 * 封装公共弹出层
 * @param url
 * @param title
 */
function openLayer(url, title) { // 封装打开弹出层的代码

    $.ajaxSettings.async = false; // 先修改为同步请求

    $.get(url, function (res) {
        layer.open({
            type: 1,  /// 类型 1，代表它是页面层
            title: title, /// 弹出层左上角显示的名称
            area: ['800px', '450px'], /// 弹出层的宽高
            content: res // 弹出层的内容（其实这里是请求后端返回的页面数据）
        });
    });

    $.ajaxSettings.async = true;  // 调用完后修改为异步请求
}

/**
 * 监听提交事件
 * @param filter  按钮绑定
 * @param type  请求类型
 */
function mySubmit(filter, type) {

    layui.form.on('submit(' + filter + ')', function (data) {
        // console.log(data.elem);  /// 被执行事件的元素 DOM 对象，一般为 button 对象
        // console.log(data.form);  /// 被执行提交的 form 对象，一般存在 form 标签时才会返回
        // console.log(data.field); /// 当前容器的全部表单字段，名值对形式：{name : value}

        // 使用 Ajax 请求提交表单
        $.ajax({
            url: data.form.action,  // 获取提交的路径
            async: false,
            type: type,
            contentType: 'application/json;charset=utf-8',   /// 文本类型
            data: JSON.stringify(data.field),
            success: function (res) {
                if (res.code == 0) {
                    layer.closeAll();  /// 关闭弹出层
                    query(); /// 查询
                } else {
                    layer.alert(res.msg);  /// 打印提示信息
                }
            }
        });
        return false;  /// 阻止表单跳转，如果需要表单跳转，去掉这段即可。
    });
}